<template>
  <div class="formbox">
    <div class="sub1_box">
      <div class="title">订刊信息</div>
      <div class="name_line">
        <span>{{ magazine.magazine }}</span>
        <span>({{ price }}元/年，全年{{ magazine.periods }}期)</span>
      </div>
      <el-form
        ref="sub1Form"
        :model="sub1Form"
        class="sub1Form"
        :inline="true"
        :rules="sub1Rules"
      >
        <el-form-item
          label="年份"
          prop="year"
        >
          <el-select v-model="sub1Form.year">
            <el-option
              v-for="(item,index) in yearOptions"
              :key="index"
              :label="item"
              :value="item"
            >

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="起止期"
          class="period"
          prop="periodsStart"
        >
          <el-select
            v-model="sub1Form.periodsStart"
            @change="changeStart"
          >
            <el-option
              v-for="(item,index) in startOptions"
              :key="index"
              :label="item"
              :value="item"
            >

            </el-option>
          </el-select>
          <span> - </span>
        </el-form-item>
        <el-form-item
          class="period"
          prop="periodsEnd"
        >
          <el-select
            v-model="sub1Form.periodsEnd"
            @change="changeEnd"
          >
            <el-option
              v-for="(item,index) in endOptions"
              :key="index"
              :label="item"
              :value="item"
            >

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="份数"
          prop="quantity"
        >
          <el-input
            v-model="sub1Form.quantity"
            @blur="calcMoney"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="金额"
          class="money"
        >
          <span>{{ sub1Form.money }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="sub2_box">
      <div class="title">订阅信息</div>
      <el-form
        ref="sub2Form"
        :model="sub2Form"
        class="sub2Form"
        label-width="120px"
        :rules="sub2Rules"
      >
        <el-form-item
          label="单位"
          prop="company"
          required
        >
          <el-input v-model="sub2Form.company"></el-input>
        </el-form-item>
        <el-form-item
          label="联系人"
          prop="name"
        >
          <el-input v-model="sub2Form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          prop="tele"
        >
          <el-input v-model="sub2Form.tele"></el-input>
        </el-form-item>
        <el-form-item
          label="地址"
          class="address"
          prop="address"
        >
          <el-select
            v-model="sub2Form.province"
            @change="getCityList"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="sub2Form.city"
            @change="getCountyList"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="sub2Form.county">
            <el-option
              v-for="item in countyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-input v-model="sub2Form.address"></el-input>
        </el-form-item>
        <el-form-item
          label="集订分投"
          class="type"
        >
          <el-radio-group
            v-model="sub2Form.type"
            :fill="'#b9151e'"
          >
            <el-radio label='1'>单地址</el-radio>
            <el-radio label='2'>多地址</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="是否开发票"
          class="invoice"
        >
          <el-radio-group
            v-model="sub2Form.invoiceNum"
            :fill="'#b9151e'"
          >
            <el-radio label='0'>不开发票</el-radio>
            <el-radio label='1'>开一张发票</el-radio>
            <el-radio label='2'>开多张发票</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div
      class="sub3_box"
      v-show="sub2Form.type==='2'"
    >
      <div class="title">收刊信息</div>
      <div class="btn_right">
        <!-- <el-button
          style="color: white;background-color: #ba1a24; font-size: 10px;height: 20px;line-height: 0;width: 100px;margin-right:20px;"
          @click="uploadExcel('address')"
        >上传表格</el-button> -->
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="uploadHeaders"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :limit="1"
          :on-success="uploadSucc3"
          :file-list="fileList"
        >
          <el-button style="color: white;background-color: #ba1a24; font-size: 16px;height: 30px;line-height: 30px;width: 100px;margin-right:20px;padding:0;">上传表格</el-button>
        </el-upload>
        <el-button
          style="width: 100px;color: white;background-color: #9c01ff;font-size: 16px;height: 30px;line-height: 30px;width: 100px;padding:0;"
          @click="downloadTemplate('address.xls')"
        >下载模板</el-button>
      </div>
      <el-table
        class="receiveTable"
        :data="sub3Table"
        border
      >
        <el-table-column
          type="index"
          width="60"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="company"
          label="收刊单位名称"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.company"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.address"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="tele"
          label="联系电话"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.tele"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收件人"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="postcode"
          label="邮编"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.postcode"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity1"
          label="数量"
          width="60"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.quantity1"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="deliver"
          label="收刊方式"
          width="90"
          align="center"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.deliver"
              placeholder="是否挂号"
              disabled
            >
              <el-option
                v-for="item in deliverOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>

        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <span
              class="del"
              @click="delLine('sub3Table',scope.$index)"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="btn_line">
        <el-button
          style="color: white; background-color: #ba1a24; font-size: 13px;height: 30px;line-height: 0;width: 80px;"
          @click="addLine('sub3Table')"
        >添加行</el-button>
      </div>
    </div>
    <div
      class="sub3_box"
      v-show="sub2Form.invoiceNum!=='0'"
    >
      <div class="title">发票信息</div>
      <div class="btn_right">
        <!-- <el-button
          style="color: white;background-color: #ba1a24; font-size: 10px;height: 20px;line-height: 0;width: 100px;margin-right:20px;"
          @click="uploadExcel('invoice')"
        >上传表格</el-button> -->
        <el-upload
          class="upload-demo"
          :action="uploadInvoiceUrl"
          :headers="uploadHeaders"
          :show-file-list="false"
          accept=".xlsx,.xls"
          :limit="1"
          :on-success="uploadSucc4"
          :file-list="fileList"
        >
          <el-button style="color: white;background-color: #ba1a24; font-size: 16px;height: 30px;line-height: 30px;width: 100px;margin-right:20px;padding:0;">上传表格</el-button>
        </el-upload>
        <el-button
          style="width: 100px;color: white;background-color: #9c01ff;font-size: 16px;height: 30px;line-height: 30px;width: 100px;padding:0;"
          @click="downloadTemplate('invoice.xlsx')"
        >下载模板</el-button>
      </div>
      <el-table
        class="receiveTable"
        :data="sub4Table"
        border
      >
        <el-table-column
          type="index"
          width="60"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="company"
          label="单位名称"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.company"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyid"
          label="统一社会信用代码"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.companyid"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="comaddress"
          label="地址"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.comaddress"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="comtele"
          label="电话"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.comtele"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="combank"
          label="开户行"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.combank"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="comaccount"
          label="银行账号"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.comaccount"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="电子邮箱"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.email"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.mobile"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          width="60"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.quantity"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <span
              class="del"
              @click="delLine('sub4Table',scope.$index)"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="btn_line"
        v-show="sub2Form.invoiceNum==='2'"
      >
        <el-button
          style="color:white; background-color:#ba1a24; font-size: 13px;height: 30px;line-height: 0;width: 80px;"
          @click="addLine('sub4Table')"
        >添加行</el-button>
      </div>
    </div>
    <div class="sub4_box">
      <div class="title">备注信息</div>
      <div class="notes_line">
        <span>备注</span>
        <el-input
          type="textarea"
          v-model="marks"
          placeholder="请出入备注信息"
        ></el-input>
      </div>
    </div>
    <div class="btn_box">
      <el-button
        style="margin-right:20px;color: white; background-color: #ba1a24; font-size: 18px;width: 100px;"
        @click="submitForm"
      >提交</el-button>
      <el-button
        class="cancelbtn"
        style=" border:1px solid #ba1a24;font-size:  18px;width: 100px;"
        @click="cancel"
      >取消</el-button>
    </div>
  </div>
</template>

<script>
import { ordersave, getAreas, downloadTemplate, uploadExcel, uploadInvoiceExcel, getValue } from '../../api/basisMG'
export default {
  name: 'order-page',
  data() {
    return {
      uploadUrl: uploadExcel(),
      uploadInvoiceUrl: uploadInvoiceExcel(),
      uploadHeaders: {
        Authorization: localStorage.getItem('token')
      },
      // 杂志对象
      magazine: {},
      sub1Form: {
        year: '',
        periodsStart: '',
        periodsEnd: '',
        quantity: '',
        money: '0'
      },
      sub1Rules: {
        year: [
          { required: true, message: '请选择年份', trigger: 'blur' },
        ],
        periodsStart: [
          { required: true, message: '请选择起止期', trigger: 'blur' },
        ],
        periodsEnd: [
          { required: true, message: '请选择起止期', trigger: 'blur' },
        ],
        quantity: [
          { required: true, message: '请选择份数', trigger: 'blur' },
        ],
      },
      sub2Form: {
        company: '',
        name: '',
        tele: '',
        province: '',
        city: '',
        county: '',
        address: '',
        type: '1',//集订
        invoiceNum: '0'//分投
      },
      sub2Rules: {
        company: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        tele: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        address: [{ required: true, message: '请选择地址', trigger: 'blur' }],
      },
      sub3Table: [
        {
          company: '',
          address: '',
          tele: '',
          name: '',
          postcode: '',
          quantity1: '',
          deliver: '',
        }
      ],
      sub4Table: [
        {
          company: '',
          companyid: '',
          comaddress: '',
          comtele: '',
          combank: '',
          comaccount: '',
          email: '',
          mobile: '',
          quantity: ""
        }
      ],
      deliverOptions: [
        { label: '是', value: true },
        { label: '否', value: false }
      ],
      provinceList: [],
      cityList: [],
      countyList: [],
      marks: '',
      fileList: [],
      startOptions: [],
      endOptions: [],
      yearOptions: [],
      price: ''
    }

  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        this.magazine = val.query.item
        this.price = (Number(this.magazine.price) * Number(this.magazine.periods)).toFixed(2)
        const length = Number(this.magazine.periods)
        for (let i = 1; i <= length; i++) {
          this.startOptions.push(i)
        }
      }
    }
  },
  created() {
    window.data = this
    this.getProvinceList()
    this.getYears()
  },
  methods: {
    async getYears() {
      const res = await getValue('year')
      this.yearOptions = res.msg.split(',')
    },
    async uploadSucc3(res) {
      // this.sub3Table = this.sub3Table.concat(res.data)
      this.sub3Table = res.data

    },
    async uploadSucc4(res) {
      // this.sub4Table = this.sub4Table.concat(res.data)
      this.sub4Table = res.data

    },
    async downloadTemplate(str) {
      const res = await downloadTemplate(str)
      const blob = new Blob([res]);

      const fileName = str === 'invoice.xlsx' ? `发票信息.xlsx` : '地址信息.xls';

      if ("download" in document.createElement("a")) {
        // 非IE下载
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob, {
          type: "text/csv;charset=utf-8",
        });
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName);
      }

    },
    changeStart(start) {
      this.endOptions = []
      this.sub1Form.quantity = ''
      this.sub1Form.periodsEnd = ''
      const length = Number(this.magazine.periods)
      for (let i = Number(start); i <= length; i++) {
        this.endOptions.push(i)
      }
    },
    changeEnd() {
      this.sub1Form.quantity = ''
    },
    calcMoney() {
      const start = Number(this.sub1Form.periodsStart)
      const end = Number(this.sub1Form.periodsEnd)
      // if (end)
      const quantity = Number(this.sub1Form.quantity)
      if (quantity === 0) {
        this.sub1Form.money = '0.00'
      } else {
        this.sub1Form.money = ((end - start + 1) * quantity * Number(this.magazine.price)).toFixed(2)
      }
    },
    delLine(table, index) {
      this[table].splice(index, 1)
    },
    addLine(table) {
      const temp = {
        company: '',
        address: '',
        tele: '',
        name: '',
        postcode: '',
        quantity: '',
        deliver: '',
      }
      this[table].push(temp)
    },
    async getProvinceList() {
      const res = await getAreas(0)
      this.provinceList = res.data
    },
    async getCityList(pid) {
      const res = await getAreas(pid)
      this.cityList = res.data
    },
    async getCountyList(pid) {
      const res = await getAreas(pid)
      this.countyList = res.data
    },
    cancel() {
      this.$router.go(-1)
    },
    async submitForm() {
      await this.$refs.sub1Form.validate()
      await this.$refs.sub2Form.validate()
      const params = {
        orderM: {
          "mid": this.magazine.id,
          "year": "",
          "periodsStart": "",
          "periodsEnd": "",
          "quantity": "",
          "money": "",
          "magazine": this.magazine.magazine
        },
        order: {
          "company": "",
          "name": "",
          "tele": "",
          "province": "",
          "city": "",
          "county": "",
          "address": "",
          "type": '1',
          "invoiceNum": '1',
          "marks": this.marks,
        },
        // 收刊
        address: [
          // {
          //   "company": "",
          //   "name": "",
          //   "tele": "",
          //   "address": "",
          //   "postcode": "",
          //   "quantity1": "",
          //   "deliver": ""
          // }
        ],
        invoices: [
          // {
          //   "company": "",
          //   "companyid": "",
          //   "combank": "",
          //   "comaccount": "",
          //   "comtele": "",
          //   "email": "",
          //   "mobile": "",
          // }
        ]
      }
      Object.assign(params.orderM, this.sub1Form)
      Object.assign(params.order, this.sub2Form)
      if (this.sub2Form.type === '2') {
        params.address = this.sub3Table
      }
      if (this.sub2Form.invoiceNum !== '0') {
        params.invoices = this.sub4Table
      }

      const res = await ordersave(params)
      console.log(res, 'res');
      this.$alert('提交成功！', '提示', {
        confirmButtonText: '确定',
        confirmButtonClass: 'tipsConfirm'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.formbox {
  margin: 0 20% 0 20%;
  font-size: 16px;
  .title {
    padding-top: 10px;
    border-bottom: 2px solid #b9151e;
    width: 84px;
    height: 30px;
    line-height: 30px;
    margin-left: 15px;
    font-size: 20px;
    font-weight: 700;
    font-family: 宋体;
    margin-bottom: 5px;
  }
  ::v-deep .el-input__inner {
    height: 32px;
  }
  .sub1_box {
    margin-top: 20px;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    padding-bottom: 10px;
    .name_line {
      padding-left: 20px;
      margin-top: 15px;
      margin-bottom: 10px;
      span {
        display: inline-block;
        &:nth-of-type(1) {
          margin-right: 10px;
        }
      }
    }
    .sub1Form {
      padding-left: 20px;
      display: flex;
      ::v-deep .el-input__inner {
        width: 100px !important;
      }
      .el-form-item {
        margin-bottom: 0;
        ::v-deep .el-form-item__error {
          padding-top: 0;
          top: 90%;
        }
      }
      .period {
        display: flex;
        ::v-deep .el-form-item__content {
          display: flex;
        }
      }
      ::v-deep .el-date-editor {
        width: 100px;
        .el-input__inner {
          padding-right: 0;
        }
      }
      .money {
        span {
          color: #ba1a24;
        }
      }
    }
  }
  ::v-deep .el-form-item__label {
    font-size: 16px;
    line-height: 56px;
  }
  ::v-deep .el-form-item__content {
    line-height: 56px;
  }
  ::v-deep .el-radio__label {
    font-size: 16px;
  }
  .sub2_box {
    margin-top: 20px;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    padding-bottom: 10px;
    .sub2Form {
      padding-right: 20px;
      width: 100%;
      box-sizing: border-box;
      // padding: 0 20px;
      .el-form-item {
        width: 100%;
        display: flex;
        margin-bottom: 0;
        ::v-deep .el-form-item__content {
          flex: 1;
          margin-left: 0 !important;
          .el-form-item__error {
            padding-top: 0;
            top: 90%;
          }
        }

        ::v-deep .el-radio__inner {
          width: 14px;
          height: 14px;
        }
        ::v-deep .el-radio-group {
          transform: translateY(-2px);
        }
      }
      ::v-deep .el-radio .el-radio__input.is-checked .el-radio__inner {
        background-color: #b9151e;
        border-color: #b9151e;
        color: #b9151e;
      }
      ::v-deep .el-radio .el-radio__input.is-checked .el-radio__label {
        color: #b9151e;
      }
      ::v-deep .el-radio__input.is-checked + .el-radio__label {
        color: #b9151e;
      }
    }
  }
  .sub3_box {
    margin-top: 20px;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    .btn_right {
      position: absolute;
      top: 15px;
      right: 10px;
      .upload-demo {
        display: inline-block;
      }
    }
  }
  .sub4_box {
    margin-top: 20px;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0px 30px 30px 0;
    .notes_line {
      width: 100%;
      display: flex;
      margin-top: 20px;
      & > span {
        width: 110px;
        margin-right: 10px;
        text-align: right;
        padding-top: 5px;
      }
      ::v-deep .el-textarea {
        flex: 1;
      }
      ::v-deep .el-textarea__inner {
        // width: 560px;
        height: 140px;
      }
    }
  }
  .btn_box {
    padding: 20px 0;
    display: flex;
    justify-content: center;
  }
  ul {
    width: 98%;
    margin: 10px auto 0 auto;
    font-size: 10px;
    li {
      display: flex;
      :nth-of-type(1) {
        background-color: #df9b9e;
        color: #fff;
        line-height: 0;
        padding: 0;
      }
    }
  }
  ::v-deep .el-table {
    width: 98%;
    margin: 10px auto;
    font-size: 16px;
    .el-table__header {
      .el-table__cell {
        background-color: #df9b9e;
        color: #fff;
        line-height: 0;
        padding: 0;
      }
    }
    .el-table__body {
      .el-input__suffix {
        display: none;
      }
      .el-table__cell {
        font-weight: 500;
        font-family: 幼圆;
        padding: 0;
        .cell {
          padding: 10px 5px;
        }
        .del {
          font-size: 16px;
          cursor: pointer;
          color: rgba(186, 26, 36);
        }
      }
      .el-input__inner {
        // width: 38px;
        width: 100%;
        height: 32px;
        padding: 0;
        font-size: 16px;
        text-align: center;
      }
    }
  }
  .btn_line {
    height: 50px;
    box-sizing: border-box;
    padding-left: 1%;
  }
}
</style>
